<template>
<div>
  <el-table
    :data="tableData.filter(data => !search || data.id.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">
    <el-table-column label="商品id" prop="id"></el-table-column>
    <el-table-column label="图片地址" prop="imgSrc"></el-table-column>
    <el-table-column label="图片id" prop="imgId"></el-table-column>
    <el-table-column align="right">
      <template slot="header" slot-scope="scope">
        <i class="el-icon-plus" @click="add()"></i>
      </template>
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.row.id,scope.row.imgSrc,scope.row.imgId)">编辑</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.row.imgId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--修改图片地址-->
  <el-dialog
    title="输入新的图片地址"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <!--嵌套一个表单-->
    <el-form ref="form" :model="currImg" label-width="80px">
      <el-form-item label="新地址">
        <el-input v-model="currImg.imgSrc" placeholder="请输入新图片的地址"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false" type="warning" plain>取 消</el-button>
    <el-button type="success" @click="updateImg()" plain>确 定</el-button>
  </span>
  </el-dialog>
<!--  删除-->
  <el-dialog
    title="警告"
    :visible.sync="del"
    width="30%"
    :before-close="handleClose">
    <span>确认删除？</span>
    <span slot="footer" class="dialog-footer">
    <el-button @click="del = false">取 消</el-button>
    <el-button type="primary" @click="deleteImg()">确 定</el-button>
  </span>
  </el-dialog>
  <!--添加图片-->
  <el-dialog
    title="输入图片信息"
    :visible.sync="addImg"
    width="30%"
    :before-close="handleClose">
    <!--嵌套一个表单-->
    <el-form ref="form" :model="currImg" label-width="80px">
      <el-form-item label="商品id">
        <el-input v-model="currImg.id" placeholder="请输入商品id"></el-input>
      </el-form-item>
      <el-form-item label="图片地址">
        <el-input v-model="currImg.imgSrc" placeholder="请输入图片的地址"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="addImg = false" type="warning" plain>取 消</el-button>
    <el-button type="success" @click="addImgs()" plain>确 定</el-button>
  </span>
  </el-dialog>
</div>
</template>


<script>
import axios from "axios";

export default {
  name: "ShopImg",
  data() {
    return {
      tableData: [{
        id:'',
        imgSrc:'',
        imgId:'',
      }],
      search: '',
      dialogVisible:false,
      currImg:{
        id:'',
        imgSrc:'',
        imgId:'',
      },
      del:false,
      addImg:false,
    }
  },
  methods: {
    handleEdit(id, imgSrc,imgId) {
      // console.log("id"+id+"图片地址"+imgSrc+"图片id"+imgId);
      this.currImg.id=id;
      this.currImg.imgSrc=imgSrc;
      this.currImg.imgId=imgId;
      this.dialogVisible = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    handleDelete(imgId) {
      this.currImg.imgId=imgId;
      this.del=true;  //打开对话框
    },
    deleteImg(){
      this.del=false;  //关闭对话框
      axios.get('http://localhost:8081/shop/deleteImg?imgId='+this.currImg.imgId)
        .then((res) => {
          if(res.data.result){
            this.$message({
              message: '删除成功',
              type: 'warning'
            });
            this.onLoadShop();//重新加载页面
          }
        })
    },
    //加载图片信息
    onLoadShop() {
      axios.get('http://localhost:8081/shop/selectImg')
        .then((res) => {
          this.tableData=res.data.img;
        })
    },
    updateImg(){
      this.dialogVisible = false;//先隐藏对话框
      // console.log("修改后："+this.currImg.id+"地址"+this.currImg.imgSrc);
      axios.post('http://localhost:8081/shop/updateImg',this.currImg)
      .then((res)=>{
        if(res.data.result){
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.onLoadShop();//重新加载页面
        }
      })
    },
    add(){
      // console.log("点击添加");
      this.addImg=true;//显示对话框
    },
    addImgs(){
      this.addImg=false;//隐藏对话框
      axios.post('http://localhost:8081/shop/addImg',this.currImg)
        .then((res)=>{
          if(res.data.result){
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.onLoadShop();//重新加载页面
          }
        })
    }
  },
  created() {
    this.onLoadShop();  //加载商品图片信息
  }
}
</script>


<style scoped>

</style>
